<style>
    li.attr-select.active{
        background: rgb(232, 74, 123);
        color: #fff;
    }
</style>
<volist name="attri" id="val">
    <switch name="key">
        <case value="color">
            <li>
                <h2>颜色</h2>
                <ul class="specifications">
                    <volist name="val" id="v">
                        <li class="attr-select" style="border:1px solid {$v.value}" data-attr="颜色" data-value="{$v.value}" data-name="{$v.name}">{$v.name}</li>
                    </volist>
                </ul>
            </li>
        </case>
        <case value="size">
            <li>
                <h2>尺码</h2>
                <ul class="specifications">
                    <volist name="val" id="v">
                        <li class="attr-select" data-attr="尺寸" data-value="{$v.value}" data-name="{$v.name}">{$v.name}</li>
                    </volist>
                </ul>
            </li>
        </case>
        <case value="spec">
            <li>
                <h2>规格</h2>
                <ul class="specifications">
                    <volist name="val" id="v">
                        <li class="attr-select" data-attr="规格" data-value="{$v.value}" data-name="{$v.value}">{$v.value}</li>
                    </volist>
                </ul>
            </li>
        </case>
    </switch>

</volist>
<input type="text" hidden="hidden" name="attribute">
<script>
    $(function(){
        var lis = $(".attr-select");
        $(".attr-select").on('click',function(){
            console.log("点击了属性 "+$(this).data("attr")+" 值为 "+$(this).data("value")+" 名为 "+$(this).data("name"));

            clear_bg($(this).data("attr"));
            $(this).addClass('active');
            var input = $("input[name=attribute]");

            var attr = {};
            for(var i=0; i<lis.length; i++){
                if($(lis[i]).hasClass("active")){
                    var attr_li = {};
                    attr_li['name'] = $(lis[i]).data("name");
                    attr_li['value'] = $(lis[i]).data("value");
//                    attr.push(attr_li);
                    attr[$(lis[i]).data("attr")] = attr_li;
                }
            }
            console.log(attr);
            var attribute = JSON.stringify(attr);
            console.log(attribute);
//            var attr = '{"name":"'+$(this).data("name")+'","value":"'+$(this).data("value")+'"}';
            $(input).val(attribute);
            console.log("属性表单值为 "+$(input).val());
        });
        function clear_bg(attr){
            for(var i=0; i<lis.length; i++){
                if($(lis[i]).data("attr") == attr){
                    $(lis[i]).removeClass('active');
                }

            }
        }
    });
</script>
